<template>
  <div class="baseInfo1" :class="isFunc ? 'is-func' : ''">
    <a-card>
      <div slot="title">
        <div class="title1">
          {{ title }}
          <a
            style="
              text-decoration: underline;
              margin-left: 10px;
              font-size: 14px;
              font-weight: normal;
            "
            @click="onClickToHowTwilio"
          >
            {{ $t('twilio.howto') }}
          </a>
        </div>
      </div>
      <a-spin tip="Loading..." :spinning="isLoading">
        <a-form-model
          ref="ruleForm"
          :rules="rules"
          :model="form"
          hideRequiredMark
          labelAlign="left"
          :colon="false"
          :label-col="{ span: 7 }"
          :wrapper-col="{ span: 13 }"
        >
          <a-form-model-item prop="sid" :label="$t('twilio.sid')">
            <a-tooltip trigger="hover">
              <template slot="title">{{ $t('common.mustEnter') }}</template>
              <a-input v-model="form.sid" :placeholder="$t('twilio.sid2')" />
            </a-tooltip>
          </a-form-model-item>
          <a-form-model-item prop="authToken" :label="$t('twilio.token')">
            <a-tooltip trigger="hover">
              <template slot="title">{{ $t('common.mustEnter') }}</template>
              <a-input
                v-model="form.authToken"
                :placeholder="$t('twilio.token2')"
              />
            </a-tooltip>
          </a-form-model-item>
          <a-form-model-item prop="authPhone" :label="$t('twilio.phone')">
            <a-tooltip trigger="hover">
              <template slot="title">{{ $t('common.mustEnter') }}</template>
              <a-input
                v-model="form.authPhone"
                :placeholder="$t('twilio.phone2')"
              />
            </a-tooltip>
          </a-form-model-item>
          <a-form-model-item
            class="btn-wrapper"
            :wrapper-col="{ span: 13, offset: 7 }"
          >
            <a-button type="primary" @click="onSubmit" block>
              {{ $t('common.save') }}
            </a-button>
          </a-form-model-item>
        </a-form-model>
      </a-spin>
    </a-card>
  </div>
</template>

<script>
import { requestHttp, maccApi } from '@utils/index';
// import Card from '../../components/Card.vue';
import { mapState } from 'vuex';
import authSysMixin from '@project/authSys/mixin/authSysMixin';
export default {
  name: 'TwillioSetting',
  mixins: [authSysMixin],
  // components: {
  //   Card,
  // },
  props: {
    isFunc: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      title: this.$t('twilio.title'),
      isLoading: false,
      form: {
        sid: '',
        authToken: '',
        authPhone: '',
      },
      rules: {
        sid: {
          required: true,
          message: this.$t('common.mustEnter'),
          trigger: 'blur',
        },
        authToken: {
          required: true,
          message: this.$t('common.mustEnter'),
          trigger: 'blur',
        },
        authPhone: {
          required: true,
          message: this.$t('common.mustEnter'),
          trigger: 'blur',
        },
      },
    };
  },
  computed: {
    // ...mapState('User', ['tenantInfo']),
  },
  created() {
    this.loadBaasInfo();
  },
  methods: {
    onClickToHowTwilio() {
      window.open(
        `https://cloud.ruijienetworks.com/help/#/ArticleList?id=47a9ee62d14747b2b86eeeb43f2a9e5d`,
        '_blank'
      );
    },
    async loadBaasInfo() {
      this.isLoading = true;
      let res = await this.requestHttpAuth({
        api: maccApi.MACC_BAAS_GET_API,
        replaces: {
          tenantName: this.tenantInfo.tenantName,
        },
        querys: {
          tenantId: this.tenantInfo.tenantId,
        },
        method: 'GET',
      });
      if (!res.data.code) {
        this.form.sid = res.data.smsSid;
        this.form.authToken = res.data.smsToken;
        this.form.authPhone = res.data.smsFromPhoneNumber;
      } else {
        this.$message.warning(res.data.msg);
      }
      this.isLoading = false;
    },
    async onSubmit() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          const params = {
            smsSid: this.form.sid,
            smsToken: this.form.authToken,
            smsFromPhoneNumber: this.form.authPhone,
          };
          let res = await this.requestHttpAuth({
            api: maccApi.MACC_BAAS_ADD_UPDATE_POST_API,
            method: 'POST',
            replaces: {
              tenantName: this.tenantInfo.tenantName,
            },
            querys: {
              tenantId: this.tenantInfo.tenantId,
            },
            params: params,
          });
          if (!res.data.code) {
            this.$message.info(this.$t('common.saveSuceess'));
            this.loadBaasInfo();
          } else {
            this.$message.warning(res.data.msg);
          }
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.ant-card {
  border-radius: 5px;
}
.title {
  text-align: left;
  border-left: 2px solid #2b6afd;
  padding-left: 8px;
  font-size: 16px;
  color: #333;
}
.title1 {
  font-size: 16px;
  color: @gray-10;
  font-weight: bold;
}
.baseInfo1 {
  margin: 5px;
  //box-shadow: 0 1px 4px 0 rgb(0 0 0 / 13%);
  margin-bottom: 22px;
}
.is-func {
  text-align: left;
  /deep/.ant-card-head {
    display: none;
  }
  /deep/.ant-card-bordered {
    border: none;
  }
  /deep/.ant-card-body {
    padding: 0;
  }
  /deep/.ant-form {
    max-width: 800px;
  }
  .btn-wrapper {
    text-align: left;
    /deep/.ant-btn {
      width: auto;
    }
  }
  /deep/.ant-form-item-label {
    line-height: 32px;
  }
  /deep/.ant-form-item-control {
    line-height: 32px;
  }
}
</style>
